<template>
	<!-- page元素设置 -->
	<page-meta
		root-background-color="#eee"
		page-style="height: 100%"
	>
		<!-- 导航栏设置 -->
		<navigation-bar
			title="配置"
			:loading="true"
			front-color="red"
			background-color="#aaaaaa"
			:color-animation-duration="1000"
			color-animation-timing-func="easeIn"
		/>
	</page-meta>
	<h4>导航栏设置</h4>
	<view class="list">
		<button @click="handleEvent1">设置导航栏名称</button>
		<button @click="handleEvent2">设置导航栏样式</button>
		<button @click="handleEvent3">设置导航栏加载状态</button>
		<button @click="handleEvent4">隐藏导航栏加载状态</button>
		<button @click="handleEvent5">不显示回到首页按钮</button>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
			/* 背景控制 */
			// wx.setBackgroundTextStyle({
			//   textStyle: 'dark' // 下拉背景字体、loading 图的样式为dark light
			// })
			// wx.setBackgroundColor({
			// 	backgroundColor:'#aaaaaa', // 窗口的背景色
			// 	backgroundColorTop: '#ffffff', // 顶部窗口的背景色为白色（仅 iOS 支持）
			// 	backgroundColorBottom: '#ffffff', // 底部窗口的背景色为白色（仅 iOS 支持）
			// })
			
			// wx.showActionSheet({
			//   itemList: ['A', 'B', 'C'],
			//   success (res) {
			//     console.log(res.tapIndex)
			//   },
			//   fail (res) {
			//     console.log(res.errMsg)
			//   }
			// })
		},
		methods: {
			handleEvent1(){
				wx.setNavigationBarTitle({ title: '新的导航栏名称' })
			},
			handleEvent2(){
				wx.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#ff0000',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},
			handleEvent3(){
				wx.showNavigationBarLoading()
			},
			handleEvent4(){
				wx.hideNavigationBarLoading()
			},
			handleEvent5(){
				wx.hideHomeButton()//不显示活到首页按钮
			},
		}
	}
</script>

<style lang="scss" scoped>
	h4{
		padding: 30rpx;
	}
	.list{
		padding: 0 30rpx;
		button{
			height: 70rpx;
			line-height: 70rpx;
			font-size: 35rpx;
			margin-bottom:20rpx;
		}
	}
	
</style>
